<!--
 * @Author: FengTeng
 * @Date: 2021-02-18 17:05:13
 * @LastEditTime: 2021-03-03 16:48:40
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\views\member-manage\MemberManage.vue
-->
<template>
  <div class="member-manage" v-if="userPermissions.memberManage.lookSearch">
    <div class="pool-item">
      <el-select
        class="search-select"
        v-model="searchFormData.searchItem"
        @change="handleSelectClick()"
        placeholder="请选择查询项"
      >
        <el-option
          v-for="item in searchFormInfo.searchItems"
          :key="item.itemKey"
          :label="item.label"
          :value="item.itemKey"
        ></el-option>
      </el-select>
      <el-input class="search-input" v-model="searchFormData.searchValue" placeholder="请输入查询内容"></el-input>
    </div>
    <div class="pool-item">
      <el-date-picker
        class="created-date"
        v-model="searchFormData.createdDate"
        type="date"
        placeholder="请选择创建时间"
      ></el-date-picker>
    </div>
    <div class="pool-item">
      <el-date-picker
        class="final-follow-date"
        v-model="searchFormData.finalFollowDate"
        type="date"
        placeholder="请选择最后跟进时间"
      ></el-date-picker>
    </div>
    <el-button class="search-button" type="primary" :loading="searchFormInfo.searchLoading" @click="handleSearch()"
      >查询</el-button
    >
    <member-table
      :tableData="memberTableData"
      :columnSet="memberColumnSet"
      :tableConfig="memberTableConfig"
      @page-change="handlePageChange($event)"
      @member-detail="handleMemberDetail($event)"
    ></member-table>
    <member-detail-modal
      ref="memberDetailModalRef"
      :modalConfig="memberDetailConfig"
      @open-products-modal="openProductsModal($event)"
    ></member-detail-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import MemberTable from "@/components/table/member-table/MemberTable.vue";
import MemberDetailModal from "@/components/modal/member-detail-modal/MemberDetailModal.vue";
import { mapState } from "vuex";
export default {
  name: "MemberManage",
  components: {
    MemberTable,
    MemberDetailModal
  },
  data() {
    return {
      searchFormData: {
        searchItem: "else",
        createdDate: "",
        finalFollowDate: ""
      },
      searchFormInfo: {
        searchItems: [
          {
            label: "请选择查询项",
            itemKey: "else"
          },
          {
            label: "手机号",
            itemKey: "phone"
          },
          {
            label: "称呼",
            itemKey: "nickName"
          },
          {
            label: "创建人",
            itemKey: "creator"
          },
          {
            label: "跟进人",
            itemKey: "follower"
          }
        ],
        searchLoading: false
      },
      memberColumnSet: [
        {
          label: "序号",
          prop: "id",
          width: "100",
          align: "center"
        },
        {
          label: "联系方式",
          prop: "phone",
          width: "120",
          align: "center"
        },
        {
          label: "称呼",
          prop: "chenghu",
          align: "center"
        },
        {
          label: "性别",
          prop: "sex",
          width: "60",
          align: "center"
        },
        {
          label: "成交指数",
          prop: "chengjiao",
          align: "center"
        },
        {
          label: "跟进次数",
          prop: "genjin",
          align: "center"
        },
        {
          label: "创建时间",
          prop: "time",
          width: "120",
          align: "center"
        },
        {
          label: "最后跟进时间",
          prop: "endtime",
          width: "120",
          align: "center"
        },
        {
          label: "创建人",
          prop: "cjren",
          align: "center"
        },
        {
          label: "跟进人",
          prop: "gjren",
          align: "center"
        },
        {
          label: "操作",
          prop: "option",
          align: "center",
          customSlot: "customSlot"
        }
      ],
      memberTableData: [],
      memberTableConfig: {
        // 分页配置
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        }
      },
      memberDetailConfig: {
        visible: false,
        CloseOnClickModal: false,
        showClose: true
      }
    };
  },
  created() {
    this.initMemberTable();
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    })
  },
  methods: {
    handleSelectClick() {
      console.log("选择搜索项");
    },
    handleSearch() {
      console.log("搜索事件");
      this.searchFormInfo.searchLoading = true;
      let createdDate;
      if (this.searchFormData.createdDate !== "") {
        createdDate = new Date(+new Date(this.searchFormData.createdDate) + (8 * 3600 * 1000));
        createdDate = this.formatDate(createdDate);
      } else {
        createdDate = this.searchFormData.createdDate;
      }
      this.memberTableConfig.pageConfig.page = 1;
      let that = this;
      $.post(
        apis.memberManageSearch,
        {
          type: "select1",
          type1: this.searchFormData.searchItem,
          data: this.searchFormData.searchValue,
          starttime: createdDate
          // pageIndex: this.memberTableData.pageConfig.page,
          // pageSize: this.memberTableData.pageConfig.pageSize
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            resp.data = [...resp.data.slice(0, 9)];
            that.memberTableData = [...resp.data];
            that.memberTableData.forEach(item => {
              item.option = "查看详情";
            });
            console.log(that.memberTableData);
            that.memberTableConfig.pageConfig.total = 10;
            that.searchFormData.createdDate = "";
          } else {
            this.$message.error(resp.msg);
          }
          this.searchFormInfo.searchLoading = true;
        }
      );
      setTimeout(() => {
        this.searchFormInfo.searchLoading = false;
      }, 1000);
    },
    initMemberTable() {
      // 初始化表格数据
      this.requestMemberTableData();
    },
    requestMemberTableData() {
      $.post(
        apis.getTableDataApi,
        {
          pageIndex: this.memberTableConfig.pageConfig.page,
          pageSize: this.memberTableConfig.pageConfig.pageSize,
          type: "selecthuiyuan"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            this.memberTableData = [...resp.data.tableData];
            this.memberTableData.forEach(item => {
              item.option = "查看详情";
            });
            console.log(this.memberTableData);
            this.memberTableConfig.pageConfig.total = resp.data.total;
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
      this.memberTableData.forEach(item => {
        item.option = "查看详情";
      });
    },
    handlePageChange(event) {
      console.log("分页器", event);
      this.memberTableConfig.pageConfig.page = event;
      this.requestMemberTableData();
    },
    handleMemberDetail(event) {
      console.log("查看用户详情", event);
      this.$refs.memberDetailModalRef.openModal(event);
    },
    formatDate(date) {
      let fmtDate = date.toISOString();
      fmtDate = fmtDate.split("T")[0].replaceAll("-", "");
      return fmtDate.toString();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
